<script setup>

import {onMounted, reactive, ref, toRaw} from "vue";
import {Refresh, Search} from "@element-plus/icons-vue";
import axios from "axios";

// 模糊查询条件
let title=ref()
let status=ref()
let realname=ref("")

// 分页信息
let pageNum=ref(1)
let pageSize=ref(6)
let total=ref(6)

//显示的数据
let message=ref([])

const formLabelWidth = '140px'
let dialogFormVisibleAdd =ref(false)
let dialogFormVisibleUpd =ref(false)
let dialogFormVisibleDel =ref(false)

// 状态数组
let options=ref(["已支付","未支付","取消"])

// 删除的编号
let num=ref(0)
let numArr=ref([])

//判断修改框和添加框
let str1=ref("")
let str2=ref("添加新购买记录")
let str3=ref("")
let str4=ref("确定删除该条数据吗?")

let tableData=ref([{
  course_id:1
}])

//课程数组
let courseArr=ref([])
//会员数组
let memberArr=reactive([])
//表单
let form=ref({

  // purchaseId:0,
  // course:{
  //   courseId:0,
  //   title:""
  // },
  // member:{
  //   memberId:0,
  //   realname:""
  // },
  // purchasePrice:"",
  // purchaseTime:null,
  // status:""
    privatemessage:{
      replyContent:"",
      replyTime:null
    }
})

onMounted(()=>{
  axios.get(`/privatemessage/selectCount2?consultantId=${localStorage.getItem("consultantId")}`)
      .then(res=>{
        total.value=res.data.data
      })
      .catch(err=>{
        console.log(err)
      })
  axios.get(`/privatemessage/select2?consultantId=${localStorage.getItem("consultantId")}&pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
      .then(res=>{
        message.value=res.data.data.list
      })
      .catch(err=>{
        console.log(err)
      })
})

//添加新购买记录
const addBuyCourse1=()=>{
  str1.value="添加新购买记录"
  form.value={
    purchaseId:0,
    course:{
      courseId:0,
      title:""
    },
    member:{
      memberId:0,
      realname:""
    },
    purchasePrice:"",
    purchaseTime:null,
    status:""
  }
  dialogFormVisibleAdd.value=true;
}
const addBuyCourse2=()=>{
  for (const course of courseArr.value) {
    if (course.title===form.value.course.title){
      form.value.course.courseId=course.courseId;
    }
  }
  for (const member of memberArr.value){
    if (member.realname===form.value.member.realname){
      form.value.member.memberId=member.memberId;
    }
  }
  dialogFormVisibleAdd.value=false;
}

//修改回复内容
const changeBuyCourse1=(obj)=>{

  str1.value="修改回复内容"
  form.value=obj;
  dialogFormVisibleAdd.value=true;
}
//修改数据库回复内容和回复时间
const changeBuyCourse2=()=>{
  console.log(form.value.privatemessage[0].messageId)
  console.log(form.value.privatemessage[0].replyContent)
  axios.put("/privatemessage/updateAnswer",{messageId:form.value.privatemessage[0].messageId,replyContent:form.value.privatemessage[0].replyContent},{
    headers:{"Content-Type":"multipart/form-data"}
  })
     .then(res=>{
       axios.get(`/privatemessage/select2?consultantId=${localStorage.getItem("consultantId")}&pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
           .then(res=>{
                  message.value=res.data.data.list
                 console.log(res.data.data)
           })
           .catch(err=>{
             console.log(err)
           })
        alert("回复成功")
      })
     .catch(err=>{
       alert("回复失败")
     })
  dialogFormVisibleAdd.value=false;
}

//删除私信信息
const deleteBuyCourse1=(obj)=>{
  form.value=obj;
  axios.delete(`/privatemessage/deleteMessage?messageId=${form.value.privatemessage[0].messageId}`)
    .then(res=>{
      axios.get(`/privatemessage/select2?consultantId=${localStorage.getItem("consultantId")}&pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
          .then(res=>{
            message.value=res.data.data.list
                console.log(res.data.data)
          })
          .catch(err=>{
            console.log(err)
          })
        alert("删除成功")
    })
    .catch(err=>{
        alert("删除失败")
    })
}
const deleteBuyCourse2=()=>{

  dialogFormVisibleDel.value=false;
}
// 批量删除购买记录
const deleteSelect1=(purchaseId)=>{
  const data = JSON.parse(JSON.stringify(numArr.value));
  axios.delete("/privatemessage/deleteMessageByIds",{
    headers:{"Content-Type": "application/json"},
    data:data
  })
      .then(res=>{
        if (res.data.code == 200){
          axios.get(`/privatemessage/select2?consultantId=${localStorage.getItem("consultantId")}&pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
              .then(res=>{
                message.value=res.data.data.list
              })
              .catch(err=>{
                console.log(err)
              })
          alert("删除成功")
        }else {
          alert("删除失败")
        }
      })
      .catch(err=>{
        alert("删除失败")
      })
}
const deleteSelect2=()=>{

  dialogFormVisibleDel.value=false;
}

//模糊查询
const search=()=>{
  if (realname.value){
    axios.get(`/privatemessage/selectByUsername666?realname=${realname.value}&consultantId=${localStorage.getItem("consultantId")}`)
        .then(res=>{
          if (res.data.code==200){
            message.value=res.data.data
          }else {
            alert("查询失败")
          }
        })
        .catch(err=>{
          console.log(err)
        })
  }
}

//重置搜索
const resetSearch=()=>{
  realname.value=null
  axios.get(`/privatemessage/select2?consultantId=${localStorage.getItem("consultantId")}&pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
      .then(res=>{
        if (res.data.code==200){
          message.value=res.data.data.list
        }else {
          alert("查询失败")
        }
      })
      .catch(err=>{
        alert("查询异常")
      })
}

//查询所有的购买记录
const findAll=()=>{
  // axios.get("/coursepurchase",{
  //   params:{
  //     title:title.value,
  //     status:status.value,
  //     realname:realname.value
  //   }
  //
  // })
  //     .then(res=>{
  //       tableData.value=res.data.data
  //     })
  //     .catch(err=>{console.log(err)})
}
// 查询所有的课程数组
const findCourse=()=>{
  // axios.get("/course")
  //     .then(res=>{
  //       courseArr.value=res.data.data
  //     })
  //     .catch(err=>console.log(err))
}
//查询所有的员工数组
const findMember=()=>{
  // axios.get("/member/all")
  //     .then(res=>{
  //       memberArr.value=res.data.data
  //     })
  //     .catch(err=>console.log(err))
}

// 展示动态选择的数据
const showArr=(selection)=>{
  for (const s of selection) {
    numArr.value.push(s.privatemessage[0].messageId)
  }
}

const change =(page)=>{
  pageNum.value=page;
  axios.get(`/privatemessage/select2?consultantId=${localStorage.getItem("consultantId")}&pageNum=${pageNum.value}&pageSize=${pageSize.value}`)
      .then(res=>{
        message.value=res.data.data.list
      })
      .catch(err=>{
        console.log(err)
      })
}
const prevPage=()=>{
  console.log(pageNum.value)
}
const nextPage=()=>{
  console.log(pageNum.value)
}
</script>

<template>
  <div class="top">
    会员名称 <el-input v-model="realname" style="width: 240px" placeholder="请输入会员名称" />

    <el-button type="primary" style="margin-left: 20px" @click="search" :icon="Search">搜索</el-button>

    <el-button type="warning" style="margin-left: 20px" @click="resetSearch" :icon="Refresh">重置</el-button>
  </div>


  <div class="table">

    <div class="tar">
      <el-button type="danger" plain @click="deleteSelect1">批量删除</el-button>
    </div>

    <el-scrollbar>
      <div class="scrollbar-flex-content">
    <el-table :data="message" @selection-change="showArr" style="width:1300px;height: 800px">
      <el-table-column type="selection" width="55" />
      <el-table-column property="privatemessage[0].messageId" label="私信编号" width="100px"/>
      <el-table-column property="privatemessage[0].content" label="私信内容"  width="250px"/>
      <el-table-column property="privatemessage[0].member.realname" label="会员名称" width="100px"/>
      <el-table-column property="privatemessage[0].askTime" label="提问时间" width="200px" />
      <el-table-column property="realname" label="咨询师名称" width="150px" />
      <el-table-column property="privatemessage[0].replyContent" label="回复内容" width="300px" />
      <el-table-column property="privatemessage[0].replyTime" label="回复时间" width="200px"/>
      <el-table-column property="" label="操作" width="180px" >
        <template #default="scope">
          <el-button type="warning" round @click="changeBuyCourse1(scope.row)">修改</el-button>
          <el-button type="danger" round @click="deleteBuyCourse1(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
    </el-scrollbar>
    <div class="example-pagination-block">
      <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" @currentChange="change" @nextClick="nextPage" @prevClick="prevPage"/>
    </div>

    <!--    添加/修改回复内容-->
    <el-dialog v-model="dialogFormVisibleAdd" :title="str1" width="500">
      <el-form :model="form">
        <el-form-item label="回复内容" :label-width="formLabelWidth">
<!--          <el-input v-model="form.privatemessage[0].replyContent" autocomplete="off" />-->
          <el-input
              type="textarea"
              v-model="form.privatemessage[0].replyContent"
              autocomplete="off"
              :autosize="{ minRows: 10 }"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleAdd= false">取消</el-button>
          <el-button type="primary" @click="changeBuyCourse2()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog v-model="dialogFormVisibleDel" title="删除信息" width="500" draggable>
      <span>{{ str3 }}</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisibleDel = false">取消</el-button>
          <el-button type="primary" @click="(str3===str4)?deleteBuyCourse2():deleteSelect2()">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>


  </div>
</template>

<style scoped>
.top{
  padding: 20px 0;
  margin:0 20px;
}

.table{
  padding: 20px 0;
  margin: 0 20px;
}

.tar{
  margin-bottom: 30px;
}
.scrollbar-flex-content {
  display: flex;
  width: 1300px;
}

</style>